<template>
	<div class="price-header">
		<div class="headers">
			<div class="width-1200 my-flex-between">
				<div class="left my-flex-left">
					<img class="logo" src="../../assets/logo.png" alt="" />
					<ul class="types my-flex">
						<li class="hover" :class="[{'active':$route.path=='/priceType'}]">
							<div class="my-flex-center">
								<img src="../../assets/price/list.png" alt="" />商品分类
							</div>

							<div class="block">
								<el-cascader expand-trigger="hover" separator='>' :props='optionsProps' :options="options" v-model="selectedOptions2" @change="handleChange"> </el-cascader>
							</div>
						</li>
						<li class="hover" :class="[{'active':$route.path=='/price'}]" @click="changeRouter('/price')">
							<div>首页</div>
						</li>
						<li class="hover" :class="[{'active':$route.path=='/news'}]" @click="changeRouter('/news')">
							<div>新闻资讯</div>
						</li>
						<li class="hover" :class="[{'active':$route.path=='/aboutus'}]" @click="changeRouter('/aboutus')">
							<div>关于我们</div>
						</li>
					</ul>
				</div>
				<!--登陆注册-->
				<div class="right my-flex-right">
					<span v-if="!(userInfo&&userInfo.id)" class="my-btn" @click="changeRouter('/login')">登录/注册</span>
					<template v-else>
						<!--:style="{'backgroundImage':'url('+userInfo.headImgUrl+')'}"-->
						<div class="logo hover" @click="goCenter('/userinfo')">
							<img v-if="userInfo.headImgUrl" :src="userInfo.headImgUrl" alt="" />
							<img v-else src="../../assets/centers/touxiang.jpg" alt="" />
						</div>

						<span class="hover" @click="goCenter('/userinfo')">{{userInfo.shortName}}</span>
						<div class="total_">
							<img class="shop hover" @click="changeRouter('/shopcar')" src="../../assets/price/shop.png" alt="" />
							<span v-if="total>0">{{total}}</span>
						</div>
						<span class="exit hover" @click="exit">退出</span>
					</template>

				</div>
			</div>
		</div>

		<div class="place-header"></div>
	</div>

</template>

<script>
	import { mapState } from "vuex";
	import service from '@/js/services/price';
	export default {
		data() {
			return {
				treeDate: [],
				options: [],
				optionsProps: {
					value: 'id',
					label: 'name',
					children: 'children'
				},
				selectedOptions: [],
				selectedOptions2: [],
				total: 0, //购物车总数
				icon: require('../../assets/centers/touxiang.jpg')
			};
		},
		mounted() {
			if(this.$store.state.categoryTree.length == 0) {
				this.categoryTree();
			} else {
				this.options = this.$store.state.categoryTree;
			}

		},
		computed: {
			...mapState(['userInfo'])
		},
		watch: {
			userInfo: {
				handler(val) {
					if(val && val.id) {
						this.shopcarAPICount();
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			...service,
			async categoryTree() {
				let res = await this.httptool.post(this.apis.categoryTree, null);

				this.options = this.resetCategoryTree(res.data);
				this.$store.commit('changeValue', {
					name: 'categoryTree',
					value: this.options
				})
			},
			resetCategoryTree(arr) {
				let arr_ = [];
				for(let item of arr) {
					if(item.id == 1 || item.id == 2) {
						item.children = item.children.map(item => {
							item.children = null;
							return item;
						})
					} else {
						item.children = null;
					}
					arr_.push(item)
				}
				return arr_;
			},
			handleChange(value) {
				this.$nextTick(() => {
					let txt = $('.price-header .el-cascader__label').text().trim();
					let obj = {
						name: txt,
						id: value
					}
					if(this.$route.path != '/priceType') {
						let url = '/priceType?obj=' + JSON.stringify(obj);
						this.$router.push(url)
					} else {
						this.$emit('handleChange', {
							name: txt,
							id: value
						})
					}
				})
			},
			async shopcarAPICount() {
				let res = await this.httptool.post(this.apis.shopcarAPICount, null);
				this.total = res.data;
			},
			pageChange(url) {
				this.$router.push(url);
			},
			goShopCar(url){
				let userInfo = this.$store.state.userInfo;				
				if(userInfo && userInfo.id && userInfo.type == 0) {
					this.$confirm('您还没有权限,请升级为企业买家，去升级吗?', '提示', {
						confirmButtonText: '去升级',
						cancelButtonText: '再想想',
						type: 'warning'
					}).then(() => {
						this.$router.push('/update');
					}).catch(() => {});
					return;
				}
				this.changeRouter(url);
			},
			changeRouter(url) {
				this.$router.push(url);
			},
			goCenter(url) {
				console.log(this.userInfo);
				
				if(this.userInfo && this.userInfo.type === 0) {
					this.$router.push('/update');
					return;
				}else if(this.userInfo.type==1&&!this.userInfo.isMasterAccount){
					this.$router.push('/orders');
					return;
				}
				
				this.changeRouter(url);
			},
			exit() {
				this.$confirm('确定退出吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '再想想',
					type: 'warning'
				}).then(() => {
					this.loginout();
					this.tool.cleanToken();
					this.$store.commit('resetStore');
					this.$router.replace('/price');
				}).catch(() => {});
			},
			async loginout() {
				return await this.httptool.post(this.apis.loginout, null);
			}
		}
	};
</script>
<style lang="less">
	@import '../../less/base/base.less';
	.price-header {
		height: 50px;
		position: relative;
		.headers {
			position: fixed;
			left: 0;
			top: 0;
			height: 50px;
			width: 100%;
			z-index: 1111;
			background-color: @base-color;
			>div {
				color: rgb(255, 255, 255);
				.logo {
					margin-right: 40px;
				}
				.left {
					height: 100%;
				}
				.types {
					font-size: 18px;
					height: 100%;
					li {
						position: relative;
						height: 50px;
						line-height: 50px;
						.block {
							position: absolute;
							top: 0px;
							left: -30px;
							.el-cascader {
								opacity: 0.01;
							}
						}
						>div {
							height: 100%;
							padding: 0 32px;
							img {
								margin-right: 14px;
							}
						}
						&:hover,
						&.active {
							background-color: #e24343;
						}
					}
				}
				.right {
					.shop {
						margin-left: 50px;
					}
					.logo {
						margin-right: 10px;
						width: 40px;
						height: 40px;
						overflow: hidden;
						border-radius: 50%;
						background-position: center;
						background-size: 100%;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.total_ {
						position: relative;
						span {
							position: absolute;
							left: 70px;
							top: -10px;
							display: block;
							width: 18px;
							height: 18px;
							line-height: 18px;
							text-align: center;
							border: 1px solid @color-border;
							border-radius: 50%;
							font-size: 12px;
						}
					}
					.exit {
						margin-left: 30px;
					}
				}
			}
		}
		.place-header {
			height: 50px;
			background-color: transparent;
		}
		.el-cascader.el-cascader--small{
			width: 150px;
		}
	}
</style>